<template>
    <div>
        <div class="xx-single-card">
            <div class="warp">
                <img crossOrigin="anonymous" :src="imgsrc">
            </div>
            <div class="header">
                <div class="authorAvatar"> </div>
                <div class="titleAndAuthor">
                    <div class="xx-flex-row" style="justify-content: space-between;">
                        <div class="title">{{title}}</div>
                        <el-tag v-if="type==1" size="mini" style="margin-left:10px;" effect="dark">Project</el-tag>
                    </div>

                    <div class="xx-flex-row">
                        <div class="Author">{{author}}</div>
                        <el-tag v-if="identity!=-1" size="mini" style="margin-left:10px;" :type="getIdentityColor" effect="dark">{{getIdentityString}}</el-tag>
                    </div>

                </div>
                <i class="el-icon-share"></i>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'CodeCard',
    props: {
        title: {
            type: String,
            default: '卡片'
        },
        author: {
            type: String,
            default: '作者'
        },
        headimg: {
            // 片段图片
            type: String,
            default: '/img/code.jpg'
        },
        identity: {
            type: Number,
            default: -1
        },
        id: {
            // 片段id
            type: Number,
            default: -1
        },
        type: {
            type: Number,
            default: -1
        }
    },
    data() {
        return {
            imgsrc: '/img/code.jpg'
        }
    },
    computed: {
        getIdentityString() {
            switch (this.identity) {
            case 0:
                return 'CodeShare管理员'
            case 1:
                return 'CodeShare金牌认证作者'
            case 2:
                return '初级实习作者'
            case 3:
                return '来源于网络收集'
            default:
                return ''
            }
        },
        getIdentityColor() {
            switch (this.identity) {
            case 0:
                return ''
            case 1:
                return 'danger'
            case 2:
                return 'info'
            case 3:
                return ''
            default:
                return ''
            }
        }
    },
    mounted() {
        this.getSnippetImg(this.id)
    },
    methods: {
        getSnippetImg(id) {
            if (id == -1) {
                this.imgsrc = this.headimg
                return
            }
            this.axios.get(`/common/getSnippetImg/${id}`).then((res) => {
                this.imgsrc = res.data.data
            })
        }
    }
}
</script>

<style scoped>
    .xx-single-card{
        display: flex;
        flex-direction: column;
        color: #717790;
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    .xx-single-card .header{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 10px;
    }
    .xx-single-card .authorAvatar{
        background-image: url(https://assets.codepen.io/27503/internal/avatars/users/default.png?fit=crop&format=auto&height=80&version=1571410370&width=80);
        height: 50px;
        width: 50px;
        border-radius: 10px;
        background-position: center center;
        flex-shrink: 0;
    }
    .xx-single-card .titleAndAuthor{
        padding-left: 10px;
        text-align: left;
        width: 100%;
    }
    .xx-single-card .el-icon-share{
        color: #5a5f73;
    }
    .xx-single-card .warp{
        border-radius: 6px;
        overflow: hidden;
        background: #444857;
        background-size: cover;
    }
    .xx-single-card .warp img{
        width: 100%;
        height: 250px;
    }
    .xx-single-card .header .titleAndAuthor .title{
        width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 900;
        color:var(--text-color);
        font-size: 17px;
    }
    .xx-single-card .header .titleAndAuthor .Author{
        font-size: 14px;
    }
    .xx-single-card::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: -2rem;
        left: 0;
        margin: -1rem;
        border-radius: 10px;
        overflow: hidden;
        z-index: -1;
        /* background: #1f2229; */
        background: var(--card-bg-color);
        -webkit-clip-path: inset(2rem 0 2rem 2rem round 10px);
        clip-path: inset(2rem 0 2rem 2rem round 10px);
        contain: strict;
        -webkit-transition: -webkit-clip-path 0.3s ease 0.1s;
        transition: -webkit-clip-path 0.3s ease 0.1s;
        transition: clip-path 0.3s ease 0.1s;
        transition: clip-path 0.3s ease 0.1s, -webkit-clip-path 0.3s ease 0.1s;
    }
    .xx-single-card:hover::after, .xx-single-card:focus::after, .xx-single-card:active::after {
        -webkit-clip-path: inset(0 0 0 0 round 5px);
        clip-path: inset(0 0 0 0 round 10px);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }
    @media screen and (max-width: 600px) {
        .xx-single-card .header .titleAndAuthor .title{
            width: 10em;
        }
    }
</style>
